<template>
  <div>
    <el-container>
      <!--      侧边栏-->
      <el-aside :width="asideWidth" style="min-height: 100vh;background-color:rgb(80 155 238);transition: width .3s">
        <div
            style="height: 60px;color: white;display:flex;justify-content: center;align-items: center;font-size: 18px;letter-spacing: 1px;">
          <img src="@/assets/药房2.webp" alt="" style="width: 36px;border-radius: 50%;">
          <span v-show="!isCollapse" style="transition: all .3s;margin-left: 5px">药房管理系统</span>
        </div>


        <el-menu :collapse="isCollapse" :collapse-transition="false" router :default-active="$route.path"
                 background-color="rgb(80 155 238)" text-color="#fff"
                 active-text-color="#fff" style="width: 200px;">
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-menu-item index="/element">
            <i class="el-icon-camera"></i>
            <span slot="title">Element页面</span>
          </el-menu-item>

          <el-menu-item>
            <i class="el-icon-attract"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-menu-item>
            <i class="el-icon-add-location"></i>
            <span slot="title">Element页面</span>
          </el-menu-item>

          <el-menu-item>
            <i class="el-icon-apple"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-menu-item>
            <i class="el-icon-basketball"></i>
            <span slot="title">Element页面</span>
          </el-menu-item>

          <el-submenu style="width: 200px;" index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item>用户信息</el-menu-item>
            <el-menu-item>管理员信息</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <!--      头部区域-->
        <el-header>
          <div style="height: 60px;display: flex;align-items: center;border-bottom: 1px solid rgb(202,202,202);">
            <div class="header-left" style="display:flex;align-items: center;">
              <i :class="collapseIcon" style="font-size: 26px;margin-left: 20px;" @click="handleCollapse"></i>
              <!--面包屑 -->
              <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;font-size: 18px;">
                <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/element' }">Element页面</el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <div class="header-right" style="display:flex;align-items: center;justify-content: flex-end;flex: 1">
              <i class="el-icon-full-screen" @click="handleFullScreen" style="font-size: 26px;margin-right: 10px;"></i>
              <img src="@/assets/头像.jpg" alt="" style="width: 36px;border-radius: 50%;cursor: pointer">
              <el-dropdown>
                <span class="el-dropdown-link" style="margin-left: 8px;margin-right: 20px;font-size: 16px;cursor: pointer">管理员<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>

        <!--        主体区域-->
        <el-main>
          <template>
            <!-- main区域头部功能区 -->
            <div style="display: flex;justify-content: space-between;margin: 20px 10px 20px 10px;min-width: 900px">
              <!-- 查询 -->
              <div style="width: 600px;">
                <el-input style="width: 200px;" placeholder="查询药品名称" clearable v-model="drugName"></el-input>
                <el-input style="width: 200px;margin: 0 5px" placeholder="查询分类" clearable
                          v-model="drugCategory"></el-input>
                <el-button plain type="primary" icon="el-icon-search" @click="getDrugByNameAndCategory()">查询
                </el-button>
                <el-button plain type="info" icon="el-icon-circle-close" @click="reset">重置</el-button>
              </div>

              <!-- 批量删除和添加 -->
              <div style="width: 250px;">
                <el-button plain type="danger" icon="el-icon-delete" @click="deleteDrug">批量删除</el-button>
                <el-button plain type="primary" icon="el-icon-plus" @click="addDrug(); addDrugVisible = true">添加药品
                </el-button>
              </div>
            </div>

            <!-- 药品数据列表 -->
            <el-table :data="drugs" style="width: 100%" :cellStyle="{ 'text-align': 'center' }"
                      :headerCellStyle="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">

              <!-- 数据区 -->
              <el-table-column type="selection" label="全选"></el-table-column>
              <el-table-column type="index" label="编号" width="50px"></el-table-column>
              <el-table-column label="药品名称" prop="name"></el-table-column>
              <el-table-column label="规格" prop="specification"></el-table-column>
              <el-table-column label="价格" prop="price"></el-table-column>
              <el-table-column label="分类" prop="category"></el-table-column>
              <el-table-column label="厂家" prop="manufacturer"></el-table-column>

              <!-- 操作区 -->

              <el-table-column label="操作" min-width="220px" width="220px">
                <template slot-scope="scope">
                  <el-button plain type="primary" icon="el-icon-edit"
                             @click="modifyDrugVisible = true;selectById(scope.row.id)">编辑
                  </el-button>
                  <el-button plain type="danger" @click="open(scope.row.id)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </el-main>
      </el-container>
    </el-container>

    <!-- 添加药品dialog弹窗表单 -->
    <el-dialog title="新增药品" :visible.sync="addDrugVisible" width="700px">

      <el-form :label-position="labelPosition" label-width="80px" :model="drug">
        <el-form-item label="药品名称">
          <el-input v-model="drug.name"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="drug.specification"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="drug.price"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="drug.category"></el-input>
        </el-form-item>
        <el-form-item label="厂家">
          <el-input v-model="drug.manufacturer"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDrugVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDrugVisible = false; saveDrug()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑药品dialog弹窗表单 -->
    <el-dialog title="修改药品信息" :visible.sync="modifyDrugVisible" width="700px">

      <el-form :label-position="labelPosition" label-width="80px" :model="drug">
        <el-form-item label="药品id" v-if="false">
          <el-input v-model="drug.id"></el-input>
        </el-form-item>
        <el-form-item label="药品名称">
          <el-input v-model="drug.name"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="drug.specification"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="drug.price"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="drug.category"></el-input>
        </el-form-item>
        <el-form-item label="厂家">
          <el-input v-model="drug.manufacturer"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDrugVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyDrugVisible = false; modifyDrug()">保存修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
/*取消滑动条*/
.el-aside::-webkit-scrollbar {
  display: none;
}

/* 一级菜单图标颜色 */
.el-menu-item i {
  color: #ffffff !important;
}

/* 二级菜单的父菜单图标颜色 */
.el-submenu__title i {
  color: #ffffff !important;
}

/* 二级菜单子菜单的背景颜色 */
.el-menu--inline .el-menu-item {
  background-color: #67abea !important;
  margin: 0;
}

/* 当前激活菜单样式 */
.el-menu-item.is-active {
  background-color: #86b5fc !important;
}

/* 一级菜单和二级菜单悬停样式 */
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #86b5fc !important;
}

/*头部样式*/
.el-header,.el-main {
  padding: 0 !important;
}

/* 表格标题栏样式 */
.el-table__header-wrapper thead tr th {
  background-color: #F0F8FF !important;
  color: #666;
  font-size: 15px;
}
</style>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      //控制菜单栏是否折叠
      isCollapse: false,
      //侧边栏宽度
      asideWidth: '200px',
      //头部折叠图标的显示
      collapseIcon: 'el-icon-s-fold',
      //从后端请求到的药品数据
      drugs: [],
      //查询药品名称
      drugName: '',
      //查询分类
      drugCategory: '',
      //添加药品dialog弹窗是否可见
      addDrugVisible: false,
      //修改药品dialog弹窗是否可见
      modifyDrugVisible: false,
      //dialog弹窗的对齐方式
      labelPosition: 'left',
      //存放表单药品数据
      drug: {
        name: '',
        specification: '',
        price: '',
        category: '',
        manufacturer: ''
      },
      //存放选中的列id
      selectedDrugs: []
    }
  },
  mounted() {
    //页面渲染完成后加载全部药品
    this.load();
  },
  methods: {
    //控制菜单是否折叠
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    //全屏
    handleFullScreen() {
      document.documentElement.requestFullscreen();
    },
    //加载全部药品
    load() {
      request.get('/getAllDrugs').then(res => {
        this.drugs = res.data;
      })
    },
    //根据id删除单个药品
    open(id) {
      console.log(id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/deleteDrug/${id}`)
            .then(() => {
              // 处理成功响应
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.load();
            })
            .catch(() => {
              // 处理错误响应
              this.$message({
                type: 'error',
                message: '删除失败'
              });
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //获取选中列的id
    handleSelectionChange(val) {
      this.selectedDrugs = val.map(item => item.id);
      console.log(this.selectedDrugs)
    },
    //批量删除药品
    async deleteDrug() {
      if (this.selectedDrugs.length === 0) {
        this.$message({
          message: "请选择要删除的药品",
          type: "warning"
        });
        return;
      }
      try {
        await this.$confirm("此操作将永久删除选中的药品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });

        const res = await request.delete(`/deleteDrugs/${this.selectedDrugs.join(',')}`);
        if (res.code === 1) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.load();
        } else {
          this.$message.error("删除失败");
        }
      } catch (err) {
        console.log(err);
      }
    },
    //根据药品名称和分类进行模糊查询
    getDrugByNameAndCategory() {
      request.get(`/getDrugByNameAndCategory?name=${this.drugName}&category=${this.drugCategory}`)
          .then(res => {
            this.drugs = res.data;
          })
          .catch(error => {
            console.log(error);
          })
    },
    //查询时的重置功能
    reset() {
      this.drugName = '';
      this.drugCategory = '';
      this.load();
    },
    //添加药品时清空表单
    addDrug() {
      this.drug.name = '';
      this.drug.specification = '';
      this.drug.price = '';
      this.drug.category = '';
      this.drug.manufacturer = '';
    },
    //新增药品，将表单内容提交到后端
    saveDrug() {
      request.post('/addDrug', this.drug)
          .then(() => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.load();
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: '添加失败'
            });
          });

    },
    //根据ID查询药品信息，并将信息回显到编辑表单
    selectById(id) {
      request.get(`/getDrugById/${id}`).then(res => {
        this.drug.id = res.data.id;
        this.drug.name = res.data.name;
        this.drug.specification = res.data.specification;
        this.drug.price = res.data.price;
        this.drug.category = res.data.category;
        this.drug.manufacturer = res.data.manufacturer;
      })
    },
    //修改药品信息
    modifyDrug() {
      request.put('/updateDrug', this.drug)
          .then(() => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.load();
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: '修改失败'
            });
          });
    }
  }
};
</script>
